<!doctype html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="edge">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>QQ空间2013年度升级 邀您体验 - QQ空间</title>
	<link type="text/css" rel="stylesheet" href="http://qzonestyle.gtimg.cn/qz-act/public/public.css">
	<link type="text/css" rel="stylesheet" href="style.css">
	<!--[if lt ie 9]><script>document.createElement('section');</script><![endif]-->

</head>
<body>
<!-- 活动 toolbar Str -->
<!-- toolbar -->
<div class="top-fix-bar">          <!-- 占高度容器 -->
	<div class="top-fix-inner">        <!-- fix的元素 -->
		<div class="top-fix-container" id="QZ_Toolbar_Container">    <!-- 顶部条内容容器，放置中间的主体内容和右边内容，以及加margin-right所用 -->
			<div class="top-fix-wrap">         <!-- 居中容器 -->
				<!-- Logo -->
				<a class="logo" href="###" title="QQ空间">QQ空间</a>

				<!-- 右侧icon -->
				<div class="other-items">
					<a href="" id="vip-setting" class="vip-setting"><i class="ui-icon icon-vip"></i></a>
					<a href="" id="message-news"><i class="ui-icon icon-message"></i><span class="message-num"><b>3</b></span></a>
					<a href="" id="search-entrance"><i class="ui-icon icon-search"></i></a>
				</div>

				<!-- 分割线 -->
				<b class="divide-line"></b>

				<!-- 个人信息 -->
				<div class="user-info">
					<img class="user-avatar" src="http://getimg.in/24x24" alt="">
					<span class="user-name textoverflow">麦时</span>
					<a class="logout" href="###">[退出]</a>
					<div class="user-setting" id="user-setting">
						<i class="drop-down-arrow"></i>

						<!-- “个人信息区”的下拉框内容 -->
						<div class="user-drop-down" style="display:none">
							<!-- 一条神奇的白线 -->
							<b class="white-line"></b>
							<!-- 下拉框内容 -->
							<div class="drop-down-setting">
								<a href="###">修改资料</a>
								<a href="###">主页排版</a>
								<a href="###">空间设置</a>
								<a href="###">好友管理</a>
							</div>
							<a class="online-service" href="###">在线客服</a>
						</div>
					</div>
				</div>

				<!-- 分割线 -->
				<b class="divide-line"></b>

				<!-- 返回 -->
				<div class="goback">
					<a class="goback-info" href="#">CSS动画</a>
				</div>

				<!-- “搜索”的下拉框内容 -->
				<div class="search-drop-down" style="display:none">
					<!-- 一条神奇的白线 -->
					<b class="white-line"></b>
					<!-- 搜索框 -->
					<div class="search-box">
						<input class="search-input" type="text" value="搜用户">
						<a class="search-button" href="###"><i class="icon-search-button"></i></a>
					</div>
					<!-- 没有找到好友 -->
					<div class="non-result-box">
						<p>没有找到相关用户</p>
					</div>
					<!-- 搜索好友 -->
					<div class="result-box">
						<h4 class="result-type">搜索用户</h4>
						<a class="result-list">
							<img src="http://getimg.in/50x50" alt="">
							<div class="result-details">
								<h5><span class="result-name">雪莉</span><span class="qz_vip_icon_s qz_vip_icon_s_5"></span></h5>
								<p>湖北 随州 | TA是你的好友</p>
							</div>
						</a>
						<a class="result-list">
							<img src="http://getimg.in/50x50" alt="">
							<div class="result-details">
								<h5><span class="result-name">雪莉</span></h5>
								<p>湖北 随州 | TA是你的好友</p>
							</div>
						</a>
						<a class="result-list">
							<img src="http://getimg.in/50x50" alt="">
							<div class="result-details">
								<h5><span class="result-name">雪莉</span></h5>
								<p>68.4万网友关注</p>
							</div>
						</a>
					</div>

					<!-- 其他搜索结果 -->
					<!--<ul class="result-simple-list">
						<li><a href="###">快了大本营</a></li>
						<li><a href="###">快速减肥的方法</a></li>
						<li><a href="###">快递爆仓</a></li>
						<li><a href="###">快播</a></li>
					</ul>-->

					<!-- 搜索好友结果 -->
					<a class="search-for-friends" href="###">更多搜索结果</a>
				</div>



				<!-- “黄钻”的下拉框内容 -->
				<div class="vip-drop-down" style="display: none">
					<!-- 一条神奇的白线 -->
					<b class="white-line"></b>
					<!-- 下拉框内容 -->
					<div class="drop-down-setting">
						<a href="###">续费年费</a>
						<a href="###">向好友索取</a>
						<a href="###">赠送给好友</a>
						<a href="###">黄钻官网</a>
					</div>
				</div>


			</div>   <!-- .top-fix-wrap -->
		</div>   <!-- .top-fix-container -->
	</div>   <!-- .top-fix-inner -->
</div>   <!-- .top-fix-bar -->

<!-- toolbar 结束 -->
<!-- 活动 toolbar End -->
<div class="act_zone">
	<div class="nav">
		<button type="button" class="now"><span>1</span></button>
		<button type="button"><span>2</span></button>
		<button type="button"><span>3</span></button>
		<button type="button"><span>4</span></button>
		<button type="button"><span>5</span></button>
		<button type="button"><span>6</span></button>
	</div>
	<section class="scene scene1">
		<div class="bg"></div>
		<div class="main">
			<h1><span class="none">新乐享主义<br>QQ空间2013年度升级 邀您体验</span></h1>
			<a href="#" class="dl-pc mod-btn-v8info"><span class="none">PC版升级</span></a>
			<a href="#" class="dl-phone"><span class="none">手机版升级</span></a>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene2">
		<div class="main">
			<h2><span class="none">乐清新 享倾心<br>全新个性化主题装扮</span></h2>
			<a href="#" class="dl-pc mod-btn-v8info"><span class="none">PC版升级</span></a>
			<div class="bg">
				<div class="t1"></div>
				<div class="t2"></div>
				<div class="t3"></div>
				<div class="t4"></div>
			</div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene3">
		<div class="main">
			<h2><span class="none">乐清爽 享畅快<br>操作更便捷  浏览更顺畅</span></h2>
			<a href="#" class="dl-pc"><span class="none">PC版升级</span></a>
			<div class="bg"></div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene7">
		<div class="main">
			<h2><span class="none">乐非凡 享特权<br>让生活与众不同 发掘无限乐趣</span></h2>
			<a href="#" class="dl-pc"><span class="none">PC版升级</span></a>
			<div class="po1"></div>
			<div class="po2"></div>
			<div class="po3"></div>
			<div class="cat"></div>
			<div class="phone"></div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene4">
		<div class="bg">
			<div class="bg1"></div>
			<div class="bg2"></div>
			<div class="bg3"></div>
			<div class="bg4"></div>
			<div class="bg5"></div>
			<div class="bg6"></div>
			<div class="bg7"></div>
		</div>
		<div class="main">
			<h2><span class="none">乐表达 享个性<br>七天换装 让心情每天不一样</span></h2>
			<a href="#" class="dl-phone"><span class="none">手机版升级</span></a>
		</div>
		<div class="day7">
			<div class="list">
				<div class="pics">
					<img src="img/day1.jpg" class="pic">
					<img src="img/day2.jpg" class="pic">
					<img src="img/day3.jpg" class="pic">
					<img src="img/day4.jpg" class="pic">
					<img src="img/day5.jpg" class="pic">
					<img src="img/day6.jpg" class="pic">
					<img src="img/day7.jpg" class="pic">
					<img src="img/day1.jpg" class="pic">
					<img src="img/day2.jpg" class="pic">
					<img src="img/day3.jpg" class="pic">
					<img src="img/day4.jpg" class="pic">
					<img src="img/day5.jpg" class="pic">
					<img src="img/day6.jpg" class="pic">
					<img src="img/day7.jpg" class="pic">
				</div>
			</div>
			<div class="phone"></div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene5">
		<div class="main">
			<h2><span class="none">乐表达 享个性<br>表情签到 张扬自己就这么简单</span></h2>
			<a href="#" class="dl-phone"><span class="none">手机版升级</span></a>
			<div class="po1"></div>
			<div class="po2"></div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene6">
		<div class="main">
			<h2><span class="none">乐表达 享个性<br>动态背景  让空间生活有趣又好玩</span></h2>
			<a href="#" class="dl-phone"><span class="none">手机版升级</span></a>
			<div class="bird"></div>
			<div class="hand"></div>
		</div>
		<button type="button" class="top"><span class="ico-top"></span></button>
	</section>
	<section class="scene scene8">
		<div class="main">
			<h2><span class="none">更多精彩 等你发现</span></h2>
			<a href="#" class="dl-pc mod-btn-a-disabled"><span class="none">PC版升级</span></a>
			<div class="txt">年费、LV8、LV7 黄钻用户可直接升级<br><a href="#">立即开通<strong>年费黄钻</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;一秒升级V8新版</div>
			<div class="txt" style="display:none;">您是尊贵的<strong>年费黄钻用户</strong>，可立即升级！</div>
			<a href="#" class="dl-phone"><span class="none">手机版升级</span></a>
		</div>
		<!-- 版权 Str -->
		<!-- footer -->
		<div class="layout-footer">
			<div class="layout-footer-inner">
				<!-- 版权 -->
				<div class="layout-copyright">
					<p class="copyright-items"><a href="http://vip.qzone.com/" onclick="TCISD &amp;&amp; TCISD.hotClick('threefromendofpage', 'guangxi.vip.qzone.com', 'main')" target="_blank">黄钻贵族</a> | <a href="http://user.qzone.qq.com/20050606" target="_blank">官方Qzone</a> | <a href="http://t.qq.com/qzone" target="_blank">官方微博</a> | <a href="http://connect.qq.com/" target="_blank">QQ互联</a> | <a href="http://page.opensns.qq.com/" target="_blank">认证服务</a> | <a href="http://blog.qq.com/" target="_blank">腾讯博客</a> | <a href="http://service.qq.com/special_auto/qzone.html" target="_blank">腾讯客服</a> | <a href="http://wiki.open.qq.com/wiki/Tencent_Open_Platform_Complaint_Guidelines" target="_blank">Complaint Guidelines</a> | <a href="http://www.qq.com/culture.shtml" target="_blank">粤网文[2011]0483-070号</a></p>
					<p class="copyright-en">Copyright © 2005 - 2013 Tencent.<a href="http://www.tencent.com/en-us/le/copyrightstatement.shtml" target="_blank">All Rights Reserved.</a></p>
					<p class="copyright-ch">腾讯公司 <a href="http://www.tencent.com/zh-cn/le/copyrightstatement.shtml" target="_blank">版权所有</a></p>
				</div>
				<!-- 版权 结束 -->
			</div>
		</div>
		<!-- footer 结束 -->
		<!-- 版权 End -->
	</section>
</div>
<!-- 演示JS Str -->
<script src="http://qzonestyle.gtimg.cn/qz-act/qzone-v8/v8v4/jquery.min.js"></script><!-- JQuery引入 -->
<script src="jquery.onepage-scroll.min.js"></script><!-- 滚屏插件 ， 只支持高级浏览器 -->
<script>
	function autoHeight(){ //自适应高度 & 自动缩放
		var h = $(window).height() - 34;
		var h2;
		if (h / 959 < 1 && h / 959 > 0.65) {
			h2 = 'scale(' + h / 959 + ')';
		} else if (h / 959 <= 0.65) {
			h2 = 'scale(0.65)';
		} else {
			h2 = 'scale(1)';
		}
		$('.scene, .scene1 .bg, .scene4 .bg, .bg .bg1, .bg .bg2, .bg .bg3, .bg .bg4, .bg .bg5, .bg .bg6, .bg .bg7').height(h);
		$('.main:not(.scene8 .main), .day7').css('transform', h2);

		var scene1bg = $('.scene1 .bg');
		scene1bg.width($(window).width() + 115);
	}
	var nDbg = 0;
	function day7(){ //七天换图
//		console.log($('.scene4').hasClass('active'));
		if ($('.scene4').hasClass('active')) {
			var day7Left = $('.scene4 .day7 .list .pics');
			if (parseInt(day7Left.css('left')) <= -1995) {
				day7Left.css('left', 0).animate({left: '-=285'});
			} else {
				day7Left.animate({left: '-=285'});
			}
			var arrDbg = [3,4,5,6,7,1,2];
			if (nDbg > 6) {
				nDbg = 0;
			}
			for (var i = 0; i < 7; i++) {
				$('.scene4 .bg .bg' + arrDbg[i]).css('z-index', 1).fadeOut(1000, "linear");
			}
			$('.scene4 .bg .bg' + arrDbg[nDbg]).css('z-index', 9).fadeIn(1000, "linear");
			nDbg = nDbg + 1;
	//		console.log(nDbg);
		}
	}
	function toBottom(){
		if ($.support.noCloneChecked == true || document.documentMode == 10) {
			$('.onepage-pagination li:eq(7) a').click();
		} else {
			$('html').scrollTop(6713);
		}
	}
	$(function(){
		if ($.support.noCloneChecked == true || document.documentMode == 10) { //检测IE6789，如果是，则不能做自适应变化
			$('html').addClass('animation'); //滚屏插件要用的 CSS
			autoHeight();
			$(window).resize(function(){
				autoHeight();
			});
			$(".act_zone").onepage_scroll({ //滚屏插件参数
				sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
				easing: "linear", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
				animationTime: 750, // AnimationTime let you define how long each section takes to animate
				pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
				updateURL: false // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
			});
			$(".top").click(function(){
				$(".act_zone").moveDown();
			})
		}
		setInterval(day7,3000);
	});
</script>
<!-- 演示JS End -->
</body>
</html>